<template>
	<Page>
		<Topbar hideMenu />
		<Content>
			<Panel header headerBorder title="物料操作" style="padding: 4rem;">
				<view slot="toolbar">
					<view class="back" @click="back">
						<u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
					</view>
				</view>
				<view class="table-demo">
					<Table ref="table" :columns="columns" :src="src" :params="params" @rowClick="click" pagination />
				</view>
			</Panel>
		</Content>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Table from '@/components/table/index.vue';
	import {
		getDevice
	} from "@/store/user.js";
	import fetch from "@/utils/fetch.js";

	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			Table
		},
		data() {
			return {
				src: '/dms/mobile/selectFifteenDaysByDeviceCode',
				params: {
					deviceCode: getDevice().deviceNo
				},
				columns: [{
						label: '工单状态',
						value: 'state',
					}, {
						label: '产品名称',
						value: 'materialName',
						width: '43rem',
					}, {
						label: '图号规格',
						value: 'customMaterialCode',
						width: '25rem',
					},
					{
						label: '材料牌号',
						value: 'materialMark',
						width: '25rem',
					}, {
						label: '计划数量',
						value: 'planProduceQuantity',
						type: 'number'
					}, {
						label: '生产数量',
						value: 'produceQuantity',
						type: 'number'
					}, {
						label: '计划开始时间',
						value: 'workStartTime',
						width: '27rem',
					},{
						label: '油品',
						value: 'oilClassification',
					},{
						label: '客户',
						value: 'custom',
					}, {
						label: '工单号',
						value: 'workCode',
						width: '20rem',
					}, {
						label: '工序',
						value: 'productionProcesses',
					}, {
						label: '工单组号',
						value: 'groupItem',
						width: '20rem',
					}, {
						label: '产品编号',
						value: 'materialCode',
						width: '20rem',
					}, {
						label: '产品型号',
						value: 'materialModel',
						width: '30rem',
					}, {
						label: '模具名称',
						value: 'moldName',
					}, {
						label: '模具编号',
						value: 'moldCode',
					}, {
						label: '生产顺序',
						value: 'sort',
					},
				],
			}
		},
		methods: {
			back() {
				this.goto('/pages/workbench/index');
			},
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
			click(item) {
				this.goto('/pages/workbench/material/form/index?workCode=' + item.workCode);
			},
		},
		mounted() {
			this.$refs['table'] && this.$refs['table'].reload();
		},
		onShow() {
			this.$refs['table'] && this.$refs['table'].reload();
		}
	}
</script>

<style scoped lang="scss">
	.back {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.table-demo {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
</style>